<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>房间号{{roomid}}|第七页</title>
  <meta name="description" content="谁是卧底在线分发" />
  <meta name="keywords" content="第七页,diqye,谁是卧底" />
  <link href="http://cdn.bootcss.com/meyer-reset/2.0/reset.min.css" rel="stylesheet">
  <link rel="stylesheet" href="/css/common.css">
  <style media="screen">

  .layout-content{
    background: #f1f1f1;
    margin-top: 40px;
    padding: 0px;
  }
  .layout-content textarea:focus,
  .layout-content input:focus{
    outline:1px solid #316ccb;
  }
  .layout-content textarea,
  .layout-content input{
    display: block;
    padding: 10px 20px;
    width: 100%;
    box-sizing: border-box;
    border:none;
    margin-top: 10px;
  }
  h3{
    color: #353535;
    font-size: 20px;
    text-align: center;
  }
  .ren{
    color:#959595;
    margin-top: 10px;
    text-align: center;
  }
  .wd{
    color:#ff1111;
    font-size: 16px;
    text-align: center;
    margin-top: 10px;
  }
  .btn{
    display: block;
    margin-top: 10px;
    text-align: center;
    line-height: 40px;
    text-decoration: none;
    color: #fff;
    background: #316ccb;
  }
  .btn.default{
    background: #fff;
    border: 1px solid #316ccb;
    color: #000;
  }
  </style>
</head>
<body>
  <div class="layout-content">
    <h3>房间号{{roomid}}</h3>
    <p class="ren">
         已加入/总数
       <span id="cnum">{{item.cnum}}</span>/{{item.total}}
    </p>
    <p class="wd">卧底是{{item.wd}}</p>
    <p class="wd">平民词,卧底词:{{item.dicts}}</p>
    <a href="javascript:void 0" copy class="btn">邀请好友加入游戏</a>
    <a href="/sswd" class="btn default">返回</a>
  </div>

  <script src="http://cdn.bootcss.com/clipboard.js/1.5.16/clipboard.js"></script>
<script>
  // SelectorString -> Element
  function $(selector){
    return document.querySelector(selector);
  }

  // Number -> Number
  function randomN(n){
    return parseInt(Math.random() * n)
  }

  // () -> ()
  function shuaxin(){
    reqHTTP("/sswd/room-num/{{roomid}}").then(function(n){
      $("#cnum").innerHTML = n
      if(n >= {{item.total}}){
        clearTimeout(timer)
        alert("人已到齐可以开始游戏了")
      }
    })
  }

  var timer = setInterval(shuaxin,2000);

  new Clipboard('[copy]',{
    text:function(trigger){
      return window.location.host+"/sswd/room/"+{{roomidCode}}+"/join"
    }
  }).on("success",function(){
    tip("已复制加入链接,欢迎通过QQ,微信等进行邀请")
  });



// String -> ()
function tip(msg){
  var body = document.querySelector("body")
  var div = document.createElement("div")
  div.className = "tip"
  div.innerHTML = msg
  body.appendChild(div)
  setTimeout(function(){
    div.remove();
  },3000);
}

// url -> Promise String JSON
function reqHTTP(url){
  return new Promise(function(resolve,reject){
    var xhr = new XMLHttpRequest()
    xhr.open('GET', url)
    xhr.send(null)
    xhr.onreadystatechange = function(){
      var DONE = 4 // readyState 4 代表已向服务器发送请求
      var OK = 200 // status 200 代表服务器返回成功
      if(xhr.readyState === DONE){
          if(xhr.status === OK){
              resolve(JSON.parse(xhr.responseText))
          } else{
              reject("Error: "+ xhr.status); // 在此次请求中发生的错误
          }
      }
    }
  })
}
</script>
</body>
